<template>
  <span :class="classes"><slot v-if="isShowSlot"></slot></span>
</template>

<script>
import { oneOf } from "../../utils/assist";

const prefixCls = 'layui-badge';

export default {
  name: "Badge",
  props:{
    type:{
      type:String,
      validator(value){
        return oneOf(value,['dot','rim']);
      }
    },
    bg:{
      type:String,
      validator(value){
        return oneOf(value,['orange','green','cyan','blue','black','gray']);
      }
    }
  },
  computed:{
    classes(){
      if(this.type){
        return {
          [`${prefixCls}-${this.type}`]:!!this.type,
          [`layui-bg-${this.bg}`]:!!this.bg,
        };
      }
      return [
        prefixCls,
        {
          [`layui-bg-${this.bg}`]:!!this.bg,
        }
      ];
    },
    isShowSlot(){
      return this.type!=='dot';
    }
  }
};
</script>

<style scoped>

</style>